<template>
	<el-scrollbar>
		<div class="view-home">
			<el-row :gutter="15">
				<el-col :lg="12" :xs="24">
					<div class="card">
						<dv-border-box-11 title="种族统计">
							<dv-scroll-ranking-board
								:config="{
									data: raceList,
									carousel: 'page'
								}"
								style="width: calc(100% - 100px); height: 200px; padding: 50px"
							/>
						</dv-border-box-11>
					</div>
				</el-col>
				<el-col :lg="12" :xs="24">
					<div class="card">
						<dv-border-box-11 title="门派统计">
							<dv-scroll-ranking-board
								:config="{
									data: sectList,
									carousel: 'page'
								}"
								style="width: calc(100% - 100px); height: 200px; padding: 50px"
							/>
						</dv-border-box-11>
					</div>
				</el-col>
			</el-row>
		</div>
	</el-scrollbar>
</template>

<script lang="ts" name="userChart" setup>
import { ref, onMounted } from "vue";
import { useCool } from "/@/cool";
const { service } = useCool();
const raceList = ref([]);
const sectList = ref([]);
onMounted(() => {
	service.user.data.getChatRace().then((res) => {
		raceList.value = res;
	});
	service.user.data.getChatSect().then((res) => {
		sectList.value = res;
	});
});
</script>

<style lang="scss">
.view-home {
	overflow-x: hidden;

	.card {
		background-color: #fff;
		border-radius: 6px;
		margin-bottom: 15px;
		font-size: 12px;
		letter-spacing: 0.5px;
		// color: #000;
		line-height: 1;
		background-color: #282c34;
	}
}
</style>
